<template>
  <div>
    <!-- 顶部栏 -->
    <van-nav-bar title="商品详情" style="background:#eb4450;color:white;"></van-nav-bar>
    <van-swipe class="my-swipe" :autoplay="3000" @change="getIndex" indicator-color="black">
      <van-swipe-item v-for="item in detailList.pics" :key="item.pics_id">
        <img :src="item.pics_mid" @click="show = !show" alt />
      </van-swipe-item>
    </van-swipe>
    <div class="goods_detail_price">￥{{detailList.goods_price}}</div>
    <div class="detail_name_row">
      <div class="detail_name van-multi-ellipsis--l2">{{detailList.goods_name}}</div>
      <div class="detail_collect">
        <van-icon name="star-o" />
        <p>收藏</p>
      </div>
    </div>
    <div class="detail_d_rwo">
      <div class="detail_d_title">图文详情</div>
      <!-- <div>{{detailList.goods_introduce}}</div> -->
      <iframe :srcdoc="detailList.goods_introduce" frameborder="0"></iframe>
      <!-- <div contenteditable="true">{{detailList.goods_introduce}}</div> -->
    </div>
    <!-- 弹出大图 -->
    <van-image-preview v-model="show" :start-position="index" @change="getIndex" :images="images">
      <!-- <template v-slot:index>第{{ index }}页</template> -->
    </van-image-preview>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="friends-o" text="分享" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="Tocar" />
      <van-goods-action-button type="warning" text="加入购物车" @click="Click_car" />
      <van-goods-action-button type="danger" text="立即购买" @click="Click_buy" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  name: 'detail',
  data () {
    return {
      goods_id: '',
      detailList: [],
      show: false,
      index: 0,
      big_src: '',
      images: [
      ]
    }
  },
  methods: {
    async getGoodsDetail () {
      this.goods_id = this.$route.params
      console.log(this.goods_id)
      const { data: res } = await this.$http.get('/goods/detail', { params: this.goods_id })
      if (res.meta.status !== 200) {
        this.$router.go(-1)
        return this.$message.fail('加载数据失败')
      }
      this.detailList = res.message
      this.images = this.detailList.pics.map(v => v.pics_mid)
      console.log(this.detailList)
    },
    getIndex (index) {
      // console.log(index)
      this.index = index
    },
    Click_car () {
      this.$message.success('加入购物车成功')
    },
    Click_buy () {

    },
    Tocar () {
      this.$router.push('/car')
    }
  },

  created () {
    this.getGoodsDetail()
  }

}
</script>

<style lang="less" scope>
.van-swipe-item {
  width: 100%;
  text-align: center;
  img {
    height: 200px;
  }
}
.van-swipe__indicator {
  background-color: #666 !important;
}
.goods_detail_price {
  padding: 10px;
  width: 100%;
  line-height: 30px;
  color: red;
  box-sizing: border-box;
}
.detail_name_row {
  display: flex;
  border-bottom: 3px solid #dedede;
  border-top: 3px solid #dedede;
  .detail_name {
    flex: 4;
    // padding: 10px;
    padding: 0 10px;
    border-right: 2px solid;
  }
  .detail_collect {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
}
.detail_img {
  width: 100%;
  overflow: hidden;
}
iframe {
  width: 100%;
  height: 1000px;
}
.detail_d_title {
  padding: 20px;
  color: red;
}
.van-swipe__track {
  display: flex;
  justify-content: center;
}
</style>
